import { Module } from 'vuex'
import { RootState } from '@/store/types'

export interface MenuModuleState {
  menu: any[]
}

const menuModule: Module<MenuModuleState, RootState> = {
  namespaced: true,
  state: () => {
    return {
      menu: []
    }
  },
  getters: {
    menuOptions(store) {
      return store.menu.map((item) => {
        return { label: item.name, value: item.id, disabled: item.status === 0 }
      })
    },
    menuOptionsWithPrefix(store) {
      const options = [{ label: '--- 顶级菜单 ---', value: 0, disabled: false, indent: 0 }]

      function _allMenuToOptions(data: any[], indent = 0) {
        data.forEach((item) => {
          // 只取导航菜单
          if (item.type === 0) {
            options.push({ label: item.name, value: item.id, disabled: item.status === 0, indent })
          }
          if (item.children && item.children.length) {
            _allMenuToOptions(item.children, indent + 1)
          }
        })
      }

      _allMenuToOptions(store.menu)

      return options
    }
  },
  mutations: {
    changeMenu(state, payload) {
      state.menu = payload
    }
  },
  actions: {}
}

export default menuModule
